<template>
  <view>
    <picker mode="selector" :range="beatsPerMeasureOptions" v-model="beatsPerMeasure">
      <view>Beats per Measure: {{ beatsPerMeasure }}</view>
    </picker>
    <picker mode="selector" :range="timeSignatureOptions" v-model="timeSignature">
      <view>Time Signature: {{ timeSignature }}</view>
    </picker>
    <slider min="30" max="240" v-model="tempo">
      <view>Tempo: {{ tempo }} BPM</view>
    </slider>
    <picker mode="selector" :range="soundOptions" v-model="sound">
      <view>Sound: {{ sound }}</view>
    </picker>
    <slider min="0" max="1" step="0.01" v-model="volume">
      <view>Volume: {{ (volume * 100).toFixed(0) }}%</view>
    </slider>
    <picker mode="selector" :range="subdivisionOptions" v-model="subdivision">
      <view>Subdivision: {{ subdivision }}</view>
    </picker>
    <switch v-model="vibration">Vibration</switch>
    <switch v-model="visualCue">Visual Cue</switch>
    <switch v-model="mute">Mute</switch>
    <slider min="0.5" max="2" step="0.1" v-model="playbackSpeed">
      <view>Playback Speed: {{ playbackSpeed }}</view>
    </slider>
    <button @click="saveSettings">Save Settings</button>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  data() {
    return {
      beatsPerMeasureOptions: [2, 3, 4, 5, 6, 7, 8],
      timeSignatureOptions: ['4/4', '3/4', '6/8'],
      soundOptions: ['Woodblock', 'Electronic', 'Drum'],
      subdivisionOptions: ['1/4', '1/8', '1/16'],
    };
  },
  computed: {
    ...mapState(['beatsPerMeasure', 'timeSignature', 'tempo', 'sound', 'volume', 'subdivision', 'vibration', 'visualCue', 'mute', 'playbackSpeed']),
  },
  methods: {
    ...mapMutations(['setBeatsPerMeasure', 'setTimeSignature', 'setTempo', 'setSound', 'setVolume', 'setSubdivision', 'setVibration', 'setVisualCue', 'setMute', 'setPlaybackSpeed']),
    saveSettings() {
      const settings = {
        beatsPerMeasure: this.beatsPerMeasure,
        timeSignature: this.timeSignature,
        tempo: this.tempo,
        sound: this.sound,
        volume: this.volume,
        subdivision: this.subdivision,
        vibration: this.vibration,
        visualCue: this.visualCue,
        mute: this.mute,
        playbackSpeed: this.playbackSpeed,
      };
      uni.setStorageSync('metronomeSettings', JSON.stringify(settings));
    },
  },
  created() {
    const settings = JSON.parse(uni.getStorageSync('metronomeSettings'));
    if (settings) {
      this.setBeatsPerMeasure(settings.beatsPerMeasure);
      this.setTimeSignature(settings.timeSignature);
      this.setTempo(settings.tempo);
      this.setSound(settings.sound);
      this.setVolume(settings.volume);
      this.setSubdivision(settings.subdivision);
      this.setVibration(settings.vibration);
      this.setVisualCue(settings.visualCue);
      this.setMute(settings.mute);
      this.setPlaybackSpeed(settings.playbackSpeed);
    }
  },
};
</script>

<style>
/* 样式定义 */
</style>
